<template>
    <div class="btnContainerBox">

        <template v-for="(btn,index) of localButtons">
            <template v-if="index < buttonCount-1 || (index === localButtons.length - 1 && JSON.parse(btn.style))">
                <div :class="{'bpm-task-button':true,'bpm-task-button-primary':JSON.parse(btn.style)}" :key="btn.id" @click="btnClick(btn)">
                    <a-icon type="star"  v-if="btn.id === 'btnTracked'" :theme="curVm.trackedTheme" :style="{'color':curVm.trackedColor}"/>
                    <rx-use-icon v-else-if="btn.icon" v-model="btn.icon"></rx-use-icon>
                    <span>{{curVm.getI18Name(btn,'name')}}</span>
                </div>
            </template>
            <a-dropdown v-else-if="index == buttonCount-1">
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    {{ $ti18('rxList.moreBtn','更多') }} <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                    <template v-for="(innerBtn,index) of localButtons">
                        <a-menu-item v-if="index >= buttonCount-1 && (JSON.parse(btn.style) ? index < localButtons.length - 1 : index < localButtons.length)">
                            <div
                                :key="innerBtn.id"
                                @click="btnClick(innerBtn)"
                            >
                               {{curVm.getI18Name(innerBtn,'name')}}
                            </div>
                        </a-menu-item>
                    </template>
                </a-menu>
            </a-dropdown>
        </template>
    </div>
</template>

<script>
import detailButton from "@/views/modules/bpm/core/js/detailButton";
export default {
    name: "bpm-detail-buttons",
    props:["buttons","curVm"],
    mixins:[detailButton],
    computed:{
        buttonCount(){
            return this.curVm.processConfig.instMaxButton || 4;
        }
    },
    methods:{
        btnClick(btn){
            this.curVm.handMethod(btn)
        },

    }
}
</script>

<style scoped>
.btnContainerBox{
    display: flex;
    align-items: center;
}
.bpm-task-button{
    height: 30px;
    line-height: 28px;
    padding: 0 12px;
    cursor: pointer;
}
.bpm-task-button:hover{
    color: #4285F4;
}
.bpm-task-button.bpm-task-button-primary{
    background-color: #4285F4;
    color: #fff;
    border-radius: 4px;
}
.ant-dropdown-link{
    padding: 0 12px;
}
</style>